<template>
	<!-- 	<view class="page">
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem"></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
	<!-- 		<swiper class="swiper" style="height: 100%;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
	<!-- 				<scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view>
			</swiper-item>
		</swiper>
	</view> -->
	<Tabs :TabList="TabList" :currentTab="current" @tabs="tabsChange">
		<TabPane>
			<view class="content">
				<view class="itme-box">
					<view class="h-table h-table-success">
						<view class="h-tr h-tr-2 h-thead">
							<view class="h-td">学生姓名</view>
							<view class="h-td">完成情况</view>
						</view>
						<view class="h-tr h-tr-2" v-for="(item,index) in taskItem.finishStuList" :key="index">
							<view class="h-td">{{item.name}}</view>
							<view class="h-td">已完成</view>
						</view>
					</view>
				</view>
			</view>
		</TabPane>
		<TabPane>
			<view>
				<view class="content">
					<view class="itme-box">
						<view class="h-table h-table-danger">
							<view class="h-tr h-tr-2 h-thead">
								<view class="h-td">学生姓名</view>
								<view class="h-td">完成情况</view>
							</view>
							<view class="h-tr h-tr-2" v-for="(item,index) in taskItem.noFinishStuList" :key="index">
								<view class="h-td">{{item.name}}</view>
								<view class="h-td">未完成</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</TabPane>
		<TabPane>
			<view>
				<view class="content">
					<view class="itme-box">
						<view class="h-table h-table-info">
							<view class="h-tr h-tr-2 h-thead">
								<view class="h-td">完成人数</view>
								<view class="h-td">未完成人数</view>
							</view>
							<view class="h-tr h-tr-2">
								<view class="h-td">{{taskItem.finishNum}}</view>
								<view class="h-td">{{taskItem.noFinishNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</TabPane>
	</Tabs>

</template>

<script>
	import Tabs from '@/components/wiszx-tabs/tabs.vue'
	import TabPane from '@/components/wiszx-tabs/tabPane.vue'
	export default {
		components: {
			Tabs,
			TabPane
		},
		data() {
			return {
				current: 0,
				TabList: [{
						title: '完成的学生'
					},
					{
						title: '未完成的学生'
					}, {
						title: '人数统计'
					}
				],
				teaId: "",
				taskId: "",
				taskItem: {

				}
			}
		},
		onLoad(option) {
			this.taskId = option.taskId
			this.getData()
		},
		methods: {
			getData() {
				this.teaId = uni.getStorageSync('teaId')
				uni.request({
					url: 'http://localhost:8082/task_admin/task/getTaskItem?teaId=' + this.teaId + '&taskId=' +
						this.taskId,
					method: "GET",
					success: (res) => {
						if (res.data.code == 200) {
							this.taskItem = res.data.data
						} else {

						}
					}
				});
			},
			tabsChange(index) {
				this.current = index
			}
		}
	}
</script>

<style>
	@import "@/static/css/helang-table.css";
	/* 	page {
		height: 100%;
	} */

	.page {
		padding-top: 98rpx;
		height: 100%;
	}

	.title {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: #e5e5e5 solid 1px;
		line-height: normal;
	}

	.red {
		background-color: #DD524D;
		color: #fff;
		text-align: center;
	}

	.green {
		background-color: #42b983;
		color: #fff;
		text-align: center;
	}



	.content {
		font-size: 28rpx;
		background-color: #f3f3f3;
		padding: 20rpx;
	}
</style>
